<template>
  <div>
    <el-input v-model="selectName" placeholder="请输入内容" style="width: 70%;"></el-input>
    <el-button type="primary" plain icon="el-icon-search" @click="getList"></el-button>
    <!-- 视频表格 -->
    <el-table :data="tableData" style="width: 100%" height=70vh>
      <el-table-column label="操作"  width="150">
        <template slot-scope="scope">
          <el-button type="warning" icon="el-icon-video-play" @click="playVideo(scope.row)"></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="视频名" width="650"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime" width="200">
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24">
        <div style="padding-top: 20px;">
          <el-pagination v-model="currentPage" :page-size=pageSize layout="total, prev, pager, next" :total=total
             />
        </div>
      </el-col>
    </el-row>
    <!-- 播放器弹窗 -->
    <el-dialog title=" Play Now " :visible.sync="dialogVisible" :before-close="handleClose">
      <video v-if="dialogVisible" ref="videoPlayer" class="video-js"></video>
    </el-dialog>
  </div>
</template>

<script>
import Videojs from 'video.js';
import VideoApi from '../../api/classify'

export default {
  data() {
    return {
      tableData:[],
      videos: [
        { name: 'video1', src: 'http://192.168.20.6:6000/warehouse/2023-03-30/2c1bae57-29df-41a3-8fa8-4ed144a5946b.mp4' },
        { name: 'video2', src: 'http://192.168.20.6:6000/warehouse/2023-03-30/2c1bae57-29df-41a3-8fa8-4ed144a5946b.mp4' },
        { name: 'video3', src: 'http://192.168.20.6:6000/warehouse/2023-03-30/2c1bae57-29df-41a3-8fa8-4ed144a5946b.mp4' }
      ],
      dialogVisible: false,
      currentVideo: null,
      selectName:'',
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    // 点击播放按钮
    playVideo(video) {
      this.dialogVisible = true;
      this.currentVideo = video;

      // 使用 $nextTick 等待 DOM 更新完成再初始化视频
      this.$nextTick(() => {
        const player = Videojs(this.$refs.videoPlayer, {
          controls: true,
          autoplay: false,
          preload: 'auto',
          sources: [{ src: video.src, type: 'video/mp4' }],
          width: 640,
          height: 360
        });
      });
    },

    // 关闭弹窗前停止视频播放
    handleClose(done) {
      const player = Videojs(this.$refs.videoPlayer);
      player.pause();
      player.dispose();

      done();
    },
    async getList(){
      let that = this;
      let param = new URLSearchParams();
      param.append('pageNumber', that.currentPage);
      param.append('pageSize', that.pageSize);
      param.append('name', that.selectName)
      that.tableData = []
      await VideoApi.getVideoList(param).then(res => {
        console.log(res)
        that.total = res.data.data.total
        that.tableData = res.data.data.records
      }).catch(function (err) {
        that.$message(err);
      })
    }
  },
  mounted() {
    this.getList();
  },
};
</script>

<style>
@import 'video.js/dist/video-js.css';
</style>
